<template>
  <div id="table" flex="dir:top box:first">
    <div class="table-thead">
      <ul class="table-th">
        <li class="w-35">编号</li>
        <li class="w-15">状态</li>
        <li class="w-15">场景</li>
        <li class="w-35">地址</li>
      </ul>
    </div>
    <div class="mt-10 table-content">
      <div class="table-body" v-if="list.length !== 0">
        <ul class="table-tr" v-for="(item, index) in list"
            v-bind:key="`list${index}`" @click="deviceMap(item)">
          <li class="w-35" :title="item.equipmentId">{{ item.equipmentId }}</li>
          <li class="w-15" :title="item.equipmentId">{{ equipmentStateToText(item)}}</li>
          <li class="w-20" :title="item.moduleName">{{ getModuleName(item.moduleName) }}</li>
          <li class="w-30" :title="item.equipmentAddr">{{ item.equipmentAddr }}</li>
        </ul>
      </div>
      <div v-else class="table-no-data">暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['list'],
  methods: {
    deviceMap: function (item) {
      let map = this.$store.state.event.supMap
      map.moveToDot(item.eventSysId)
    },
    getModuleName (name) {
      if (!name) {
        return ''
      }
      if (name.indexOf('-') === -1) {
        return name
      }
      return name.split('-')[1]
    },
    // 设备状态转换成文字
    equipmentStateToText: function (row) {
      return this.$base.getNameByConst(
        'select',
        'deviceState',
        row.equipmentState
      )
    }
  }
}
</script>
<style lang="less" scoped>
  #table {
    box-sizing: border-box;
    width: 100%;
    background-color: rgba(43, 54, 72, 0.95);
    border-radius: 10px;
    padding: 20px;
    .table-th {
      background-color: rgba(0, 0, 0, .2);
      height: 24px;
      line-height: 24px;
      font-size: 12px;
      color: #50e3c2;
      letter-spacing: .29px;
    }
    .table-tr {
      cursor: pointer;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      border-bottom: 1px solid hsla(0, 0%, 100%, .1);
      color: #9facc3;
      li {
        padding: 0 10px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .table-tr, .table-th {
      width: 100%;
      text-align: center;
      li {
        display: inline-block;
      }
    }
    .table-content {
      overflow-y: scroll;
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
    }
    .table-content::-webkit-scrollbar {
      width: 0 !important
    }

    .table-no-data {
      text-align: center;
      line-height: 30px;
      color: #9facc3;
    }
  }
</style>
